<script setup lang="ts">
import { init } from 'ityped'

const content = ref<null | Element>(null)
onMounted(() => {
    init(content.value as Element, { showCursor: false, disableBackTyping: true, strings: [' is not found!'] });
})

const router = useRouter()

const back = () => router.push('/')
</script>

<template>
    <div class="flex flex-wrap h-screen text-center justify-around items-center">
        <div class="font-blod desc">
            <div class="text-7xl code">404</div>
            <div class="text-3xl content" ref="content">The Page</div>
            <div
                @click="back"
                active="scale-90 transform"
                class="rounded-lg cursor-pointer transition inline-block btn"
            >👉 Go Home</div>
        </div>

        <img src="/404/33.svg" class="cover" alt="page not found" />
    </div>
</template>


<style>
.code {
    margin-bottom: 20px;
}

.content {
    height: 40px;
}

.cover {
    height: auto;
    width: 700px;
    margin: 0 5px;
    max-width: 100%;
    max-height: 100%;
}

.desc {
    flex: 1;
    width: 300px;
}

.btn {
    font-size: 20px;
    margin-top: 30px;
    padding: 12px 20px;
    --tw-shadow-color: 8, 145, 178;
    --tw-shadow: 0 4px 6px -1px rgba(var(--tw-shadow-color), 0.1),
        0 2px 4px -1px rgba(var(--tw-shadow-color), 0.06);
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, var(--tw-shadow);
}
</style>
